<template>
  
    <el-container>
      <el-main>
        <ArticleScrollPage></ArticleScrollPage>
      </el-main>
      <el-aside width="30%">
        <Me></Me>
        <Tags :tags="tags"></Tags>
        <CardArticle card-header='最热文章' icon='hot' :articles="hotArtcile"></CardArticle>
        <Archive card-header='文章归档' :archives="archive"></Archive>
        <CardArticle card-header='最新文章' icon='article' :articles="newArtcile"></CardArticle>
        <Friend :links='links'></Friend>
        <!-- <Tags :tags="tags"></Tags>
      <CardArticle cardHeader='最热文章' icon='hot' :articles="hotArtcile"></CardArticle>
      <Archive cardHeader='文章归档' :archives="archive"></Archive>
      <CardArticle cardHeader='最新文章' icon='article' :articles="newArtcile"></CardArticle>
      <Friend :links='links'></Friend> -->
      </el-aside>
    </el-container>


</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import Me from "@/components/card/Me";
import Tags from '@/components/card/Tags'
import Friend from '@/components/card/Friend'
import CardArticle from "@/components/card/CardArticle";
import Archive from "@/components/card/Archive";

export default {
  name: 'IndexPage',
  components: { ArticleScrollPage, Me, Tags, Friend, CardArticle, Archive },
  data() {
    return {
      hotArtcile: [],
      newArtcile: [],
      archive: [],
      tags: [],
      links: [],
      page: 1,
      hot_music: []

    };
  },
  mounted() {
    this.getHotArtices()
    this.getNewArtices()
    this.getTags()
    this.getLink()
    this.getArchive()

  },
  methods: {
    getHotArtices() {
      const param = {}
      this.$Api.getHotArtices(param).then(res => {
        this.hotArtcile = res.data
      })
    },
    getNewArtices() {
      const param = {}
      this.$Api.getNewArtices(param).then(res => {
        this.newArtcile = res.data
      })
    },
    getArchive() {
      const param = {}
      this.$Api.getArchive(param).then(res => {
        this.archive = res.data
      })
    },
    getTags() {
      const param = {
        limit: 20
      }
      this.$Api.getTags(param).then(res => {
        this.tags = res.data.list
      })
    },
    getLink() {
      const param = {
        limit: 20
      }
      this.$Api.getLinkTop(param).then(res => {
        this.links = res.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-container {
  .el-aside {
    //border 1px solid #cccccc
    margin-top: 30px;
    padding: 0px 10px;

    .el-card {
      &:not(:first-child) {
        margin-top: 20px;
      }
    }

  }
}
</style>